<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
            1. 新的语义化元素：main、footer、header、nav、section
                main    主体部分
                footer  底部
                header  头部
                nav     导航
                section 块元素
                语义化标签作用：
                    1、见名知意，方便代码阅读和维护
                    2、方便机器识别，利于爬虫
                    3、利于seo优化（浏览器搜索排行优化）
                        seo优化方式：
                            1、语义化标签
                            2、设置meta的description和keyword关键字
                            3、服务端渲染技术（ssr）
                                vue  --》 nuxt
                                reat --》 next
            2. 新的表单控件：date、time、email、url、search
            3. 新的 API：
            ● 音视频：audio 和 video 元素
            ● 绘图图形：canvas 元素
                画布，允许我们使用js绘制一些图形
                可以通过canvas引申到项目中的echarts
            ● 本地存储：localStorage，sessionStorage
                localStorage和sessionStorage区别
                    相同点
                        存储大小：5MB
                    不同点
                        localStorage关闭页面数据依然存在，除非是手动清除
                        sessionStorage关闭页面就丢失了
                webStorage和cookie的区别
                    存储大小：
                        webStorage 5MB
                        cookie     4KB
                    携带方式：
                        cookie 发送请求自动携带，不需要手动设置
                        webStorage 发送请求不会自动携带，需要手动设置，一般使用 localStorage存储token
            ● 多线程操作：Web Worker 
                可以起一下其他线程任务
         -->
    <input type="text" name="" id="" />
    <input type="checkbox" name="" id="" />
    <input type="date" name="" id="" />
    <input type="time" name="" id="" />
  </body>
</html>
